<template>
    <div class="HomeBox">
        <el-container>
            <el-header>
                <headerVue @changeIsCollapseFn="changeIsCollapse" :isCollapse="isCollapse" />
            </el-header>
            <el-container>
                <el-aside :width="isCollapse ? '60px' : '251px'">
                    <menuVue :isCollapse="isCollapse" />
                </el-aside>
                <el-main>
                    <Breadcrumb />
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import menuVue from './components/menu.vue';
import headerVue from "./components/header.vue"
import Breadcrumb from "@/components/Breadcrumb.vue"
import { ref } from 'vue';

const isCollapse = ref(false)

const changeIsCollapse = (val: boolean) => {
    isCollapse.value = val
    console.log(val);

}
</script>

<style scoped lang="less">
.HomeBox {
    height: 100%;

    :deep(.el-header) {
        height: 70px;
        background-color: #409EFF;
    }

    :deep(.el-aside),
    :deep(.el-main) {
        transition: all 400ms linear 0ms;
        height: calc(100vh - 70px);


        &::-webkit-scrollbar {
            width: 0;
        }
    }

    :deep(.el-aside) {
        background-color: #304156;
    }

    :deep(.el-menu) {
        border: none;
    }

}
</style>
